<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page" style="padding-bottom: 55px">
      <div class="invoiceCon" style="margin-top: 12px;background: #fff" v-for="(item, index) in list" :key="index">
        <div class="block">
          <div class="invoiceitem invoiceitem-default">
            <div class="invoiceitem" style="flex: 1">
              <div>发票抬头：</div>
              <div class="text">{{item.inv_company}}</div>
            </div>
            <div class="invoiceitem-default-text" v-if="isDefault(index)">默认</div>
          </div>
          <div class="invoiceitem">
            <div>税务登记证号：</div>
            <div class="text">{{item.inv_code}}</div>
          </div>
          <div class="invoiceitem">
            <div>注册场所地址：</div>
            <div class="text">{{item.inv_reg_address}}</div>
          </div>
          <div class="invoiceitem">
            <div>注册固定电话：</div>
            <div class="text">{{item.inv_reg_phone}}</div>
          </div>
          <div class="invoiceitem" v-if="item.inv_reg_bname">
            <div>开户行名称：</div>
            <div class="text">{{item.inv_reg_bname}}</div>
          </div>
          <div class="invoiceitem">
            <div>基本开户账号：</div>
            <div class="text">{{item.inv_reg_bank_account}}</div>
          </div>
        </div>
        <div class="block buttonbox">
          <div class="a-button" @click="onEdit(item)">修改</div>
          <div class="a-button del" @click="onRemove(item)">删除</div>
        </div>
      </div>

    </div>
    <div class="block sumit">
      <button type="button" @click="onAdd">添加开票信息</button>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'
  import invoice from '../../../mixin/invoice'

  export default {
    name: 'meInvoice',
    mixins: [invoice],
    data () {
      return {
        xheader: {
          title: '我的开票信息'
        },
        isNull: false,
        loading: false,
        more: true
      }
    },

    computed: {
      isDefault () {
        return (index) => {
          return parseFloat(this.list[index].is_default) === 1
        }
      }
    },

    watch: {
      $route (to) {
        if (to.name === 'meInvoice') {
          this.getInvoiceList()
        }
      }
    },

    created () {
      this.getInvoiceList()
    },

    methods: {
      onEdit (item) {
        this.$router.push({
          name: 'meInvoiceEdit',
          query: { item: item }
        })
      },
      async onRemove (item) {
        this.$vux.confirm.show({
          title: '提示',
          content: '是否删除该发票信息?',
          showCancelButton: true,
          onConfirm: async () => {
            this.$vux.loading.show({
              text: '请稍后'
            })
            let res = await Me.removeIssueInfo(item.inv_id)
            this.$vux.loading.hide()
            if (res.code == 0) {
              this.getInvoiceList()
              this.$vux.alert.show({
                title: '提示',
                content: '已删除'
              })
            } else {
              this.$vux.alert.show({
                title: '提示',
                content: res.msg
              })
            }
          }
        })
      },
      onAdd () {
        this.$router.push({ name: 'meInvoiceEdit' })
      }
    }
  }
</script>

<style lang="less" scoped>
  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
  }

  .invoiceCon {
    padding: 12px 0;
    margin: 12px 0;
  }

  .invoiceitem .text {
    margin-left: 5px;
    flex: 1;
  }

  .sumit {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    height: 50px;
    background: #fff;
  }

  .buttonbox {
    display: flex;
    justify-content: center;
  }

  .a-button {
    width: 140px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #50302a;
    font-size: 14px;
    border: 1px solid #d4d4d4;
  }

  .a-button + .a-button {
    margin-left: 23px;
  }

  .a-button.del {
    color: #ae2309;
    border-color: #ae2309;
  }

  .invoiceitem-default {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .invoiceitem-default-text {
    color: #ae2309;
    border: 1px solid #ae2309;
    flex-shrink: 0;
    padding: 2px 4px;
  }
</style>
